<template>
  <div class="xtx-bread-item">
    <!--传过来的 路径 如果有 就是上面的 如果没有就是下面的 -->
    <router-link v-if="to" :to="to">
      <slot></slot>
    </router-link>
    <template v-else>
      <slot></slot>
    </template>
    <span>{{ separator }}</span>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'XtxBreadItem',
  props: {
    to: {
      type: String
    }
  },
  setup () {
    const separator = inject('separator')
    return { separator }
  }
}
</script>
<style lang='less'  scoped>
span {
  margin: 0 5px;
}

.xtx-bread-item {
  &:last-child {
    span {
      display: none;
    }
  }
}
</style>
